/*
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2024-12-18 11:10:21
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2024-12-19 10:21:09
 * @FilePath: \project-my\next-learn-app\src\views\tailwind\button.tsx
 * @Description: 
 */
import React from 'react'

export default function button() {
    return (
        <div className='h-40 bg-gradient-to-r from-purple-500 to-red-400 grid place-content-center'>
            <button
                className='z-10 relative overflow-hidden rounded-full px-10 w-fit h-14 text-2xl text-white before:absolute before:block before:rounded-full before:top-0 before:right-0 before:h-full before:w-0 before:-z-10
             before:bg-green-500 before:transition-all before:duration-500 before:ease-in-out after:border-2 after:absolute after:inset-0after:rounded-full hover:before:left-0 hover:before:right-auto
             hover:before:w-full hover:after:opacity-0 hover:after:transition-all hover:after:duration-500 after:-z-10'>
                button
            </button>
        </div>
    )
}
